page-filter {
    input[type="text"] {
        -webkit-appearance: none;
    }
    $font-size: 1rem;
    .fliter-menu{
        @include flex(space-around);
        height: 4rem;
        font-size: 1rem;
        line-height: 4rem;
    }
    .fliter-menu span{
        position: relative;
        color: #666666;

    }
    
    .fliter-menu .active{
        color: #4885ED;
    }
    .fliter-menu .active:after{
        content: "";
        position: absolute;
        height: 1px;
        bottom: 0;
        left:0;
        width: 100%;
        background: #4885ED;
    }
    .content-form{
        margin-top: 1rem;
        padding: 1rem 0;
        background: #ffffff;
       
    }
    .none{
        display: none;
    }
    .content-form.active{
        display: block;
    }
    .hc-ion-select{
        background: #ffffff;
        input{
            text-align: right
        }
    }
    .hc-select{
        @include border-radius(5px);
        width: 100%;
        position: relative;
        max-width: 100%;
        height: 3rem;
        padding: 0.5rem;
        color: #999999;
        border: solid 1px #CCCCCC;
    }
    .hc-form-item{
        border-bottom: solid 1px #E6E6E6;
        padding-bottom: 1rem;
        margin: 0 1rem;
        ion-label{
            font-size: 1.2rem;
        }
        .hc-input-container-2{
            @include flex(flex-start);
        }
        .full{
            width: 100%;
        }
        .datetime-container{
            display: inline-block;

            position: relative;
            span.tidai{
                position: absolute;
                line-height: 3rem;
                color: #333;
                left: 0;
                top: 0;
                width: 100%;
                text-align: center;
                font-size: 1.2rem;
                color: #999999;
            }
        }
        ion-datetime,input{
            width: 10rem;
            @include border-radius(5px);
            border: solid 1px #CCCCCC;
            height: 3rem;
            padding: 0.5rem;
            text-align: center;
            position: relative;z-index: 3;
        }
        .line{
            display: inline-block;
            width: 10%;
            background: #cccccc;
            height: 1px;
            margin-top: calc(1.5rem - 2px);
            margin-left: 3px;
            margin-right: 3px;
        }
        .button-group{
            @include flex(space-between);
            .button{
                @include border-radius(5px);
                height: 3rem;
                overflow: hidden;
                position: relative;
                font{
                    display: block;
                    line-height: 3rem;
                    height: 100%;
                    background: #E6E6E6;
                    padding: 0 1rem;
                }
                input[type=radio]{
                    opacity: 0;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 0;
                    width:100%;
                    margin: 0;
                    padding: 0;
                    z-index: 10;
                }
                input[type=radio]:checked~font {
                    background: #4885ED;
                    color: #ffffff;
                }
            }
        }
        
    }
    .hc-ion-item.keyword{
        input{
            padding: 1.1rem 1.4rem;
        }
    }
    .trInput input{
        text-align: right;
    }
    .noborder{
        border: none;
    }
    .hc-ion-button{
        padding: 0 20px;
        @include flex(space-between);
        margin-top: 1.5rem;
    }

    .hc-ion-button button{
        width: 40%;
        height: 4rem;
        font-size: 1.1rem;
        @include border-radius(0.5rem);
    }
    
    // to post
    .upload-component{
        padding-left: 1rem;
        padding-right: 1rem;
        
        .upload-container{
            margin-top: 1rem;
            background: #ffffff;
            position: relative;
            background-size: 100% 100%; 
            height: 16rem;
            @include border-radius(1rem);
            span{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 100%;
                height: 6rem;
                text-align: center;
                i{
                    font-size: 4rem;
                    color: #999999;
                }
                p{
                    font-size: 1.4rem;
                    color: #999999;
                    margin: 1rem 0 0 0;
                }
            }
        }
        .upload-photo-more{
            margin-top: 1rem;
            @include flex(flex-start);
            flex-wrap: wrap;
            span{
                @include border-radius(5px);
                width: 8.8rem;
                height: 7rem;
                margin-right: 1.5rem;
            }
            .add{
                text-align: center;
                line-height: 7rem;
                background: #CCCCCC;
                i{
                    color: #ffffff;
                    font-size: 2.6rem;
                } 
            }
            .img_display{
                position: relative;
                background-repeat: no-repeat;
                background-size: 100%;
                i{
                    position: absolute;
                    right: -0.4rem;
                    top: -0.4rem;
                    font-size: 1.2rem;
                }
               
            }
        }

    }
    .furniture{
        display: inline-block;
        margin-right: 2%;
        width: 30%;
        padding-right: 5%; 
        i{
            font-size: 1.2rem;
            color: #666666;
            margin-right: 5px;
        }
        input{
            width: calc(100% - 3rem);
            display: inline-block;
            @include border-radius(5px);
        }
    }
    .hc-input-container-2 input{
        @include border-radius(5px);
    }
    
    .type-radio-group{
        @include flex(space-between);
        flex-wrap: wrap;
        .ml{
            margin-left: 1rem;
        }
        .mr{
            margin-right: 2rem;
        }
        .col-2{
            width: 50%;
        }
        
        .input-radio{
            line-height: 3rem;
            position: relative;
            span{
                display: inline-block;
                position: relative;
                background: #ffffff;
                border: solid 1px #CCCCCC;
                @include border-radius(0.65rem);
                margin: 0;
                padding: 0;
                @include box-area(1.3rem,center);
                vertical-align: middle;
            }
            b{
                width: 0.5rem;
                height: 0.5rem;
                @include border-radius(0.25rem);
                background: #4885ED;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                display: none;
            }
            input[type=radio],input[type=checkbox]{
                opacity: 0;
                position: absolute;
                left: 0;
                top: 0;
                margin: 0;
                padding: 0;
                width: 100%;
                z-index: 10;
            }
            input[type=radio]:checked~span b,input[type=checkbox]:checked~span b{
                display: block;
            }
            input[type=radio]:checked~span,input[type=checkbox]:checked~span{
                border-color: #4885ED;
            }
            font{
                line-height: $font-size;
                font-size: $font-size;
                color: $font-text-color;
                position: relative;
                i{
                    font-style: normal;
                    margin-left:3rem;
                }
            }
            .iconfont:before{
                font-size: 2rem;
                position: absolute;
                top: 2px;
                left: 0;
                width: 3rem;
                text-align: center;
            }
        }
    }
    .premium-listing{
        margin: 1rem;
        padding: 1rem;
        background: #ffffff;
        
        .premium-listing-date{
            margin-top: 0.8rem;
            @include flex(flex-start);
            height: 3rem;
            padding-left: 2.4rem;
            label{
                font-size: 1.2rem;
                color: #666666;
                width: 6rem;
                line-height: 3rem;
                text-align: left;
            }
            span{
                position: relative;
                margin-left: 1rem;
                width: 13rem;
                
                ion-datetime{
                    padding: 0;
                    height: 3rem;
                    min-width: 7rem;
                    border: solid 1px #CCCCCC;
                    @include border-radius(5px);
                    font-size: 1.2rem;
                    .datetime-text{
                        line-height: 3rem;
                        padding-left: 1rem;
                    }
                }
                font{
                    position: absolute;
                    right: 7px;
                    top: 0.6rem;
                    font-size: 1.6rem;
                }
            }
        }
        p{
            color: #666666;
        }
    }
    .postBtn{
        margin: 2rem 1.4rem 1.4rem 1.4rem;
        width: calc(100% - 2.8rem);
        font-size: 1.4rem;
        color: #ffffff;
        padding: 0;
        height: 4rem;
    }
    .hc-ion-item .label{color:#333;}
    .upload-video{
        video{
            display: block;
            height: 100%;
            width: 100%;
        }
    }
    .hc-ion-select{
        padding: 0 1rem !important;
    }
    //矫正radio-group
    .hc-radio-group{
        
        ion-item{
            background: #F7F7F7;
        }
        .item-radio.item-ios ion-label{
            color: #666666;
            font-size: 1.2rem;
        }
        .item-radio-checked.item-ios ion-label{
            color: #666666;
        }
        
    }
    .list-ios > .item-block:first-child{
        border-top: 0;
    }
    .list-ios > .item-block:last-child{
        border-bottom: 0;
    }
    .list-ios .item-block .item-inner{
        border: 0;
    }
    .list-ios > .item-block{
        border-bottom: 0.55px solid #c8c7cc; 
    }
    .icon-down,.icon-down2{
        font-size: 0.8rem;
        color: #b3b3b3;
    }
    // 选数量radio
    .num-box{
        @include flex(flex);
        padding: 1rem;
        background: #F7F7F7;
        
        .num-box-item ion-label{
            position: relative;
            z-index: 1;
            color: #4885ED;
        }
        .item-radio-checked ion-label{
            color: #ffffff;
        }
        .item-block{
            min-height: 0;
        }
        .num-box-item:first-child .radio-ios .radio-icon{
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-left: solid 1px #4885ED;
        }
        .num-box-item:last-child .radio-ios .radio-icon{
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .num-box-item{
            width: 16.66%;
            height: 3rem;
            line-height: 3rem;
            position: relative;
            text-align: center;
            ion-label{
                font-size: 1.2rem;
            }
            
            .radio-ios{
                position: absolute;
                left: 0;top: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                .radio-icon{
                    margin: 0;
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    border-top: solid 1px #4885ED;
                    border-right: solid 1px #4885ED;
                    border-bottom: solid 1px #4885ED;
                }
                
                .item-cover{
                    z-index: 100;
                    width: 100%;
                    height: 100%;
                    -webkit-appearance: none;
                }
                .radio-icon.radio-checked{
                    background: #4885ED;
                }
                .radio-checked .radio-inner{
                    border: 0;
                }
            }
        }
    }
    // 调整样式
    .hc-ion-item{
        padding-left: 1rem !important;
        padding-right: 1rem !important; 
    }
    .footer-img {
        height: 10rem;
        margin: 1rem;
    }
    .alert-cell{
        position: fixed;
        display: none;
        &.active{
            display: block;
        }
        z-index: 1000;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #fff;
        #map{
            height:100%;
        }
        .input-container{
            z-index: 100;
            position: absolute;
            width: 100%;
            padding: 0.5rem;
            display: flex;
            justify-content: space-between;
            button{
                width: 5rem;
                height: 2rem;
            }
            .input{
                width: calc(100% - 6rem);
                
                input{
                    height: 2rem;
                    margin: 0;
                    width:100%;
                    border: none;
                    padding: 0 0.5rem;
                }
                ul{
                    background: #fff;
                    margin: 1rem 0 0 0;
                    padding: 0;
                    li{
                        width: 100%;
                        padding: 1;
                        border-bottom: solid 1px #ccc;
                        padding: 0.5rem;
                    }
                }
            }
        }
        
    }
}
